<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备巡检记录</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link href="../static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/public.css">
    <link rel="stylesheet" href="../static/css/font-awesome.min.css">
    <!-- jquery 提示插件css -->
    <link href="../static/plugins/bootstrap-tree/bootstrap-treeview.css" rel="stylesheet">

    <link href="../static/plugins/toastr.min.css" rel="stylesheet">
    <!--日期-->
    <link rel="stylesheet" href="../static/plugins/jedate/jedate.css">
    <style>
        .manage-title {
            width: 85px;
        }

        .form-manage {
            width: 67%;
        }

        .form-manage2 {
            width: 82%;
        }

        .bootstrap-table .table thead > tr > th {
            text-align: center;
        }

        .check-box {
            width: 40px;
            height: 22px;
            color: #fff;
            background-color: #33c433;
            line-height: 20px;
            font-size: 12px;
            margin: 0 auto;
            border-radius: 1px;
        }

        .check-box2 {
            width: 50px;
            background-color: #cdd1ce;
            color: #333;
        }
    </style>
</head>
<body style="background-color:#eee">
<div id="box" style="margin-top: 10px">
    <div class="float-clear">
        <div class="float-left contentBox border-all" style="width:18%;margin: 0 0.5%;">
            <div class="content-title border-bottom">
                <span>设备巡检记录</span>
            </div>
            <div class="content-center">
                <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
                <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
                <div id="treeview7" class="test"></div>
            </div>
        </div>
        <div class="float-left contentBox border-all" style="width:80.5%;overflow: auto;">
            <div class="content-title border-bottom" style="position:relative;">
                <span>{{treeTitle.name}}</span>
            </div>
            <div class="ibox-content" style="position:relative;">
                <button class="btn btn-default pull-right my-btn my-btn-remove" onclick="deleteClick()">删除</button>
                <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
                <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 15px;left: 220px;">查询
                </button>
                <table id="table"
                       data-toggle="table"
                       data-toolbar=".toolbar"
                       data-pagination="true"
                       data-maintain-selected="true"
                       data-search="true"
                       data-show-refresh="true"
                       data-search-align="left"
                       data-toolbar-align="right">
                    <thead>
                    <tr>
                        <th data-width="40"></th>
                        <th data-align="center" data-field="facility_name">设施名称</th>
                        <th data-align="center" data-field="facility_location">设施位置</th>
                        <th data-width="60" data-align="center" data-field="facility_device_amount">设备数量</th>
                        <th data-width="100" data-align="center" data-field="check_device">已巡检设备数</th>
                        <th data-width="100" data-align="center" data-field="uncheck_device">未巡检设备数</th>
                        <th data-width="100" data-align="center" data-field="mistake">已有故障数量</th>
                        <th data-align="center" data-field="facility_user">巡检人</th>
                        <th data-align="center" data-field="date">巡检日期</th>
                        <th data-width="100" data-field="is_complete" data-align="center"
                            data-formatter="checkBoxFormatter">是否巡检完成
                        </th>
                        <th data-width="300" data-align="center" data-field="detail">详情</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!--添加模块-->
    <div id="inspectionModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}管理</h4>
                </div>
                <div class="modal-manage">
                    <!--填写名称-->
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>设备<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-manage" style="padding: 0 8px;"
                                v-model="deviceName">
                            <option v-for="item in deviceList" :value="item.name">{{item.name}}</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>巡检员<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-manage" style="padding: 0 8px;"
                                v-model="userName">
                            <option v-for="item in userList" :value="item.username">{{item.username}}</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title">
                            <span>巡检项<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-manage" style="padding: 0 8px;"
                                v-model="patrolName">
                            <option v-for="item in patrolList" :value="item.content">{{item.content}}</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <div class="manage-title" style="margin-right: 10px">
                            <span>是否巡检完成：</span>
                        </div>
                        <label style="margin-right: 5px;margin-top: 6px;cursor: pointer;">
                            <input type="checkbox" style="margin: 0;" v-model="modalData.result">
                            <span>完成</span>
                        </label>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title" style="margin-right: 10px">
                            <span>备注</span>
                        </div>
                        <textarea class="form-control form-manage form-manage2" style="resize: none"
                                  v-model="modalData.remark"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除模态框-->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="float: left;">温馨提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <img src="../static/image/delete.png" alt="" style="float: left;margin-left: 20px">
                    <h3 class="text-center" style="float: left;margin-top: 57px;margin-left: 40px">是否删除当前项</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
<!-- 全局js -->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="../static/js/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script src="../static/js/vue.min.js"></script>
<!--bootstrap-ree-->
<script src="../static/plugins/bootstrap-tree/bootstrap-treeview.js"></script>
<!--深拷贝-->
<script src="../static/js/publicServe.js"></script>
<script src="../static/plugins/toastr/toastr.min.js"></script>
<!--日期-->
<script src="../static/plugins/jedate/jedate.js"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            leftTreeLoading: true,               //左侧树结构加载判断
            leftTreeList: [],                        //左侧树
            treeTitle: {
                id: null,
                name: '设备巡检记录'
            },                  //模态框title的类型 添加|编辑
            tableList: [],               //table信息
            modalType: '添加',                //弹框  添加||删除
            modalData: {
                device_id: null, // 设备id
                result: true, // 巡检结果 0-正常 1-异常
                remark: "", // 巡检备注
                patrol_user_id: null, // 巡检用户id
                patrol_manage_id: null // 巡检项id
            },
            deviceList:[],          //所有设备数组
            deviceName:'',          //选定的设备名称
            userList:[],            //所有用户数组
            userName:'',            //选定的用户名称
            patrolList:[],          //巡检项数组
            patrolName:'',          //巡检项名称
        },
        created: function () {

        }
    });

    //获取左侧树
    function getTreeList() {
        vm.leftTreeLoading = true;
        $.ajax({
            url: 'http://172.16.200.252:8080/core/district/get_tree_all/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.leftTreeLoading = false;
                    vm.leftTreeList = response.data;
                    //绘制zTree树
                    renderZTree(vm.leftTreeList);
                    //获取数据中第一条 的下级 table list结构
                    if (vm.leftTreeList[0]) {
                        vm.treeTitle.name = vm.leftTreeList[0].name;
                        vm.treeTitle.id = vm.leftTreeList[0].id;
                        getTableList(vm.leftTreeList[0].id);
                    }
                } else {
                    toastr.info(response.error_msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    //绘制左侧树
    function renderZTree(tableList) {
        $('#treeview7').treeview({
            color: "#666",
            showBorder: false,
            data: tableList,
            onNodeSelected: function (event, data) {
                vm.treeTitle = {
                    id: data.id,
                    name: data.name
                };
                getTableList(data.id)
            }
        });
    }

    // 数据列表
    var $table = $('#table');
    //为bootstrapTable添加每一行的事件监听
    $table.on('click-row.bs.table', function (r, row, element) {
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
        //点击以后将当前行的数据赋值给vm.modalData
        vm.modalData = row;
    });
    $table.bootstrapTable({
        columns:                 //列表序号
            [{
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }],
    });

    //获取table数据
    function getTableList(id) {
        $.ajax({
            url: 'http://172.16.200.252:8080/core/patrol_recorder/get_by_district/',
            type: 'POST',
            dataType: "json",
            data: JSON.stringify({id: id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.tableList = response.data;
                    for(var i=0;i<vm.tableList.length;i++){
                        vm.tableList[i].is_complete = vm.tableList[i].is_complete==0?true:false;
                    }
                    for(var i=0;i<20;i++){
                        vm.tableList.push(
                            {
                                facility_name:'设备'+i,
                                facility_location:'太原',
                                facility_device_amount:'3',
                                check_device:'1',
                                uncheck_device:'2',
                                mistake:'5',
                                facility_user:'用户1',
                                date:'2018-1-5',
                                is_complete:true,
                                detail:'设备已检修完成'
                            }
                        )
                    }
                    //绘表格数据
                    $table.bootstrapTable('load', vm.tableList);
                } else {
                    toastr.info(response.error_msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    //添加
    function addBtnClick() {
        //清空 vm.modalData 中的值
        vm.modalData = {
            device_id: null, // 设备id
            result: true, // 巡检结果 0-正常 1-异常
            remark: "", // 巡检备注
            patrol_user_id: null, // 巡检用户id
            patrol_manage_id: null // 巡检项id
        };
        $('.table-line-active').removeClass('table-line-active');
        vm.modalType = '添加';
        vm.deviceName = "";
        vm.userName = "";
        vm.patrolName = "";
        $("#inspectionModal").modal('show');
    }

    //删除
    function deleteClick() {
        if (!vm.modalData.facility_name) {//是id
            toastr.info('删除时最少需要选中一行!');
            return
        }
        $("#deleteModal").modal('show');
    }

    //模态框  添加||编辑  确定
    function add() {
        for (var i = 0; i < vm.deviceList.length; i++) {
            if (vm.deviceList[i].name == vm.deviceName) {
                vm.modalData.device_id = vm.deviceList[i].id;
            }
        }
        for (var i = 0; i < vm.userList.length; i++) {
            if (vm.userList[i].username == vm.userName) {
                vm.modalData.patrol_user_id = vm.userList[i].id;
            }
        }
        for (var i = 0; i < vm.patrolList.length; i++) {
            if (vm.patrolList[i].content == vm.patrolName) {
                vm.modalData.patrol_manage_id = vm.patrolList[i].id;
            }
        }
        if (!vm.modalData.device_id) {
            toastr.warning('请选择设备!');
            return
        }
        if (!vm.modalData.patrol_user_id) {
            toastr.info('请选择巡检员!');
            return
        }
        if (!vm.modalData.patrol_manage_id) {
            toastr.warning('请选择巡检项!');
            return
        }
        //深拷贝
        var newModalData = copyFun(vm.modalData);
        vm.modalData.result ? newModalData.result = 0 : newModalData.result = 1;      //启用||禁用
        if (vm.modalType == '添加') {
            $.ajax({
                url: 'http://172.16.200.252:8080/core/patrol_recorder/add/',
                type: 'POST',
                dataType: "json",
                data: JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    if (response && response.success == 1) {
                        $("#inspectionModal").modal('hide');
                        //重新 绘制table
                        getTableList(vm.treeTitle.id);
                        toastr.success('添加成功')
                    } else {
                        toastr.info(response.error_msg)
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }
    }

    //模态框 删除
    function deleteTable() {
        $.ajax({
            url: 'http://172.16.200.252:8080/core/patrol_recorder/del/',
            type: 'POST',
            dataType: "json",
            data: JSON.stringify({id: vm.modalData.id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    $("#deleteModal").modal('hide');
                    toastr.success('删除成功')
                    //重新绘制table信息
                    getTableList(vm.treeTitle.id);
                } else {
                    toastr.info(response.error_msg)
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status) {
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    //为列表添加checkBox样式
    function checkBoxFormatter(value, row, index) {
        if (value) {
            return [
                '<div class="check-box">完成</div>'
            ].join('');
        } else {
            return [
                '<div class="check-box check-box2">未完成</div>'
            ].join('');
        }
    }

    //获取所有设备
    function getDeviceAll() {
        $.ajax({
            url: 'http://172.16.200.252:8080/core/device/get_all/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.deviceList = response.data;
                } else {
                    toastr.info(response.error_msg)
                }
            }
        })
    }
    //获取所有用户
    function getUserAll() {
        $.ajax({
            url: 'http://172.16.200.252:8080/core/user/get_user_all/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.userList = response.data;
                } else {
                    toastr.info(response.error_msg)
                }
            }
        })
    }
    //获取所有巡检项
    function getPatrolAll() {
        $.ajax({
            url: 'http://172.16.200.252:8080/core/patrol_manage/get_all/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if (response && response.success == 1) {
                    vm.patrolList = response.data;
                } else {
                    toastr.info(response.error_msg)
                }
            }
        })
    }

    $(document).ready(function () {
        $(".contentBox").css({"height": $(document.body).height() - 20});
        $(window).resize(function () {//当浏览器大小变化时
            $(".contentBox").css({"height": $(document.body).height() - 20})
        });
        //获取所有设备
        getDeviceAll();
        //获取zTree信息
        getTreeList();
        //获取所有用户
        getUserAll();
        //获取所有用户
        getPatrolAll();
        //获取table信息 并且绘制
        $table.bootstrapTable('load', vm.tableList);
    });

    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
</body>
</html>